<template>
    <view class="login-container">
        <view class="head-img" :style="{
            backgroundImage: 'url(' + getUrl('resource/app/images/login_head.png') + ')',
        }">
            <view class="txt"> 注册账号 </view>
        </view>
        <view class="login-view">
            <view class="login-box">
                <u-form :model="formData" ref="formRef" borderBottom labelWidth="80" labelPosition="top" :labelStyle="{
                    fontSize: '32rpx',
                    fontWeight: 'bold',
                    color: '#333333',
                    paddingBottom: '15rpx',
                }">
                    <view>
                        <u-form-item label="账号" borderBottom>
                            <u-input type="text" name="account" border="bottom"
                                placeholder="请输入账号，6-20位字符，只能包含数字、字母、下划线" maxlength="20" v-model="formData.account" />
                        </u-form-item>
                        <u-form-item label="密码" borderBottom>
                            <u-input name="password" :password="isShowPassword" border="bottom" placeholder="请输入密码"
                                v-model="formData.password">
                                <template #suffix>
                                    <u-icon :name="isShowPassword ? 'eye' : 'eye-fill'
                                        " size="20" @click="
                                            isShowPassword = !isShowPassword
                                            "></u-icon>
                                </template>
                            </u-input>
                        </u-form-item>
                        <u-form-item label="确认密码" borderBottom>
                            <u-input name="confirm_password" :password="isShowConfirmPassword" border="bottom"
                                placeholder="请输入确认密码" v-model="formData.confirm_password">
                                <template #suffix>
                                    <u-icon :name="isShowConfirmPassword
                                            ? 'eye'
                                            : 'eye-fill'
                                        " size="20" @click="
                                            isShowConfirmPassword =
                                            !isShowConfirmPassword
                                            "></u-icon>
                                </template>
                            </u-input>
                        </u-form-item>
                        <u-form-item label="手机号" borderBottom>
                            <u-input type="number" name="mobile" border="bottom" placeholder="请输入手机号" maxlength="11"
                                v-model="formData.mobile" />
                        </u-form-item>
                        <u-form-item label="验证码" borderBottom>
                            <u-input type="number" name="code" border="bottom" maxlength="6" placeholder="请输入验证码"
                                v-model="formData.code">
                                <template #suffix>
                                    <u-code ref="codeRef" @change="codeChange" seconds="60"
                                        changeText="X秒重新获取"></u-code>
                                    <text @tap="getSmsCode" :text="codeTips" class="code-txt">{{ codeTips }}</text>
                                </template>
                            </u-input>
                        </u-form-item>
                    </view>
                </u-form>
                <view class="mb-[15rpx] flex items-center">
                    <u-checkbox-group v-model="isAgreementClick">
                        <u-checkbox name="check" shape="circle" />
                    </u-checkbox-group>
                    <view class="text-xs flex">
                        已阅读并同意
                        <view @click.stop>
                            <navigator class="navigator-txt" hover-class="none"
                                url="/pages/agreement/agreement?type=service">
                                《服务协议》
                            </navigator>
                        </view>
                        和
                        <view @click.stop>
                            <navigator class="navigator-txt" hover-class="none"
                                url="/pages/agreement/agreement?type=privacy">
                                《隐私协议》
                            </navigator>
                        </view>
                    </view>
                </view>
                <button @tap="userRegister()">注 册</button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { register, sendSmsCode } from "@/api/login";
import { test } from "@/uni_modules/uview-plus";
import { getUrl } from "@/utils/common";
import { messageSuccess, messageError } from "@/utils/message";
import { useRoute } from "@/hooks/useRoute";
import useUserStore from "@/stores/user";
import { getChannel } from "@/utils/channel";
import { useApiLock } from "@/hooks/useApiLock";

const formData = reactive({
    account: "",
    password: "",
    confirm_password: "",
    mobile: "",
    code: "",
    channel: getChannel(),
});

const formRef = ref(null);
const codeRef = ref(null);
const codeTips = ref("");
const isAgreementClick = ref(false);
const isShowPassword = ref(true);
const isShowConfirmPassword = ref(true);

const codeChange = (text) => {
    codeTips.value = text;
};

// 获取验证码
const getSmsCode = async () => {
    if (codeRef.value?.canGetCode) {
        if (!test.mobile(formData.mobile)) {
            messageError("手机号不符合要求");
            return "";
        }
        await sendSmsCode({ scene: "user_register", mobile: formData.mobile });
        messageSuccess("验证码已发送");
        codeRef.value?.start();
    }
};

const { apiCall: apiRegister } = useApiLock(register);

const userRegister = async () => {
    if (!isAgreementClick.value[0])
        return messageError("请勾选已阅读并同意《服务协议》和《隐私协议》");

    if (!formData.account) return messageError("请输入账号");
    if (!formData.password) return messageError("请输入密码");
    if (!formData.confirm_password) return messageError("请输入确认密码");
    if (formData.password != formData.confirm_password)
        return messageError("密码和确认密码不一致");
    if (!formData.mobile) return messageError("请输入手机号");
    if (!formData.code) return messageError("请输入验证码");

    let res = await apiRegister(formData);
    useUserStore().login(res.token);
    messageSuccess("注册成功！", () => {
        useRoute().jumpTo({ url: "/pages/index/index", type: "reLaunch" });
    });
};
</script>

<style lang="scss" scoped>
.login-container {
    height: 100vh;
    background: #fff;

    .head-img {
        width: 100%;
        height: 300rpx;
        background-size: 100%;

        .txt {
            text-align: left;
            font-size: 42rpx;
            color: #ffffff;
            padding: 50rpx 0 0 70rpx;
            font-weight: bold;
            line-height: 70rpx;
        }
    }

    .login-view {
        width: 100%;
        position: relative;
        margin-top: -120rpx;
        background-color: #ffffff;
        border-radius: 8% 8% 0% 0;

        .login-box {
            width: 600rpx;
            margin: 0 auto;
            font-size: 28rpx;
            padding-top: 80rpx;

            .code-txt {
                color: $u-primary;
                font-size: 15px;
            }

            .navigator-txt {
                color: $u-primary;
            }

            button {
                font-size: 28rpx;
                background: #2796f2;
                color: #fff;
                height: 90rpx;
                line-height: 90rpx;
                border-radius: 50rpx;
                font-weight: bold;
            }
        }
    }
}

.clear {
    zoom: 1;
}

.clear:after {
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    content: "\20";
}
</style>
